<!--
    * Time    : 2021-01-10 11:02:20
    * Author  : zhangTj
    * Desc    : 服务商信息
-->

<template>
    <div class="w750">
        <div class="p-1 bg-fff">
            <div class="d-flex">
                <div style="width: 60px; height: 60px">
                    <img v-if="detailData.avatarUrl" :src="$imgUrlHead + detailData.avatarUrl" class="w-100 h-100" alt />
                    <img v-else src="../../assets/images/head-default.png" class="w-100 h-100" alt />
                </div>
                <div class="ml-1 d-flex flex-column j-sa">
                    <div>{{ detailData.actualName || '-' }}</div>
                    <div>{{ detailData.contactPhone || '-' }}</div>
                </div>
            </div>
        </div>
        <div class="mt-1" v-if="detailData">
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>所属区域</div>
                <div class="text-999">{{ detailData.serviceProvidersName || '-' }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>加入日期</div>
                <div class="text-999">{{ detailData.createTime | dateformat('YYYY-MM-DD') }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>押金</div>
                <div class="text-999">￥{{ detailData.cashPledgeAmount.toLocaleString() || 0 }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>保证金</div>
                <div class="text-999">￥{{ detailData.originalDepositAmount.toLocaleString() || 0 }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>所属区域已产生订单金额</div>
                <div class="text-999">￥{{ detailData.totalOrderAmount.toLocaleString() || 0 }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>所属区域已产生订单</div>
                <div class="text-999">{{ detailData.totalOrderCount || 0 }}单</div>
            </div>
            <div v-if="false" class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>所处会员等级</div>
                <div class="text-999">{{ detailData.levelName || '暂无' }}</div>
            </div>
            <div class="px-1 d-flex j-sb font-14 py-15p bg-fff border-bottom border-c-f8">
                <div>合同有效期</div>
                <div class="text-999 d-flex a-center">
                    <span>{{ detailData.periodstartTime | dateformat('YYYY-MM-DD') }}</span>
                    <span class="mx">至</span>
                    <span>{{ detailData.periodEndTime | dateformat('YYYY-MM-DD') }}</span>
                </div>
            </div>
        </div>
        <EmptyServe v-else title="暂无服务商信息" />
    </div>
</template>

<script>
import { providersNextDetail } from 'api/facilitator'
import EmptyServe from '@/components/EmptyServe/EmptyServe'

export default {
    name: '',
    components: {EmptyServe},
    data() {
        return {
            id: '', // 服务商id
            detailData: '' // 服务商信息
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        // 获取服务商详情
        getDetail() {
            providersNextDetail({
                id: this.id
            }).then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                this.detailData = res.result
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
